<template>
  <div class="message">
    <header>
      资讯管理
      <div class="search">
        <p>
          搜索:
          <input v-model="value" @input="search(value)" />
        </p>
        <div class="select">
          状态:
          <select v-model="seal" @change="area(seal)">
            <option v-for="(item,index) in options" :key="index">{{item.text}}</option>
          </select>
        </div>
        <button class="buton_one">查询</button>
        <button class="button_two">新建</button>
      </div>
    </header>
    <main>
      <div class="table">
        <table border="1">
          <thead>
            <tr>
              <th>序号</th>
              <th>文章标题</th>
              <th>创建人</th>
              <th>创建时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="index">
              <td>{{item.id}}</td>
              <td>{{item.word}}</td>
              <td>{{item.name}}</td>
              <td>{{item.time}}</td>
              <td><a-switch
                checked-children="开"
                un-checked-children="关"
                :default-checked="JSON.parse(item.one)"
              /></td>
              <td class="action">
                <span>编辑</span>
                <span @click="del(item.id)">删除</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      seal: "状态",
      value: "",
      options: [
        { text: "状态", value: "状态" },
        { text: "在职", value: "在职" },
        { text: "离职", value: "离职" }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/lists",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    },
    search(value) {
      axios({
        url: "/api/search",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        this.list = res.data.data;
      });
    },
    area(seal){
      axios({
        url:"/api/borker",
        method:'post',
        data:{
          seal:seal
        }
      }).then(res=>{
        this.list=res.data.data
      })
    },
    del(id){
      axios({
        url:'/api/del',
        method:'delete',
        data:{id:id}
      }).then(res=>{
        this.getList()
      })
    }
  }
};
</script>

<style scoped>
.search input {
  height: 30px;
}
.search button {
  margin-left: 10px;
  height: 30px;
  width: 80px;
}
.button_one {
  background: #888787;
  border: none;
}
.button_two {
  background: cornflowerblue;
  border: none;
}
.select {
  margin-left: 10px;
}
.select select {
  width: 100px;
  height: 30px;
}
.action span {
  margin-left: 10px;
}
.search {
  width: 100%;
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
}
.table {
  width: 1300px;
  height: 500px;
  margin-left: 10px;
}
table {
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  text-align: center;
}
table thead tr {
  background: #f8f8f8;
}
table thead tr th {
  height: 30px;
  background: #f8f8f8;
}
table tbody tr td {
  height: 30px;
}
</style>